@import "kb.scss";

.el-picker-panel__footer{
	.el-button--text{
		display: none;
	}
}

.i_maxW{
	max-width: 1200px;
	margin: auto;
}

.prepare-index-link{
	padding: 0 0 20px; 
	font-size: 14px;
	color: #000000;
	letter-spacing: 0.16px;
	>a{
		margin-right: 40px;
	}
}

.relation-checked{
	>span{
		margin: 0 5px 5px 0;
	}
}

.prepare-list{
	background: #FFFFFF;
	box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
	border-radius: 3px;
	padding: 30/1200*100% 35/1200*100% ;
	margin:0 18/1200*100% 18/1200*100% 0;
	width: 520/1200*100%;
	float: left;
	@extend .i_transition;
	.prepare-list-h{
		overflow: hidden;
		>a{
			display: block;
			max-width: 60%;
			font-size: 20px;
			@extend .i_text;
			line-height: 26px;
			float: left;
			&:hover{
				color: $sc_6;
			}
		}
		>span{
			float: right;
			line-height: 26px;
			font-size: 20px;
			color:  #999;
		}

	}

	.prepare-tag{
		margin-top: 20/520*100%;
		>li{
			float: left;
			background: #DDDDDD;
			font-size: 12px;
			color: #666666;
			padding: 6px 7px;
			margin-right: 20px;
			line-height: 16px;
			min-width: 40px;
			&:last-of-type{
				margin-right: 0;
			}
		}
	}

	.prepare-set{
		overflow: hidden;
		margin-top: 20/520*100%;
		>a{
			display: inline-block;
			float: left;
			background: #E5F1FF;
			font-size: 12px;
			color: #5C6772;
			padding: 6px 15px;
			margin-right: 10/520*100%;
			line-height: 19px;
			&:hover{
				background: #d5e7fd;
			}
			// &:last-of-type{
			// 	margin: 0;
			// }
		}
		.el-button{
			border: 0;
			outline: none;
			background: #E5F1FF;
			display: inline-block;
			float: left;
			font-size: 12px;
			color: #5C6772;
			padding: 6px 15px;
			line-height: 19px;
			cursor: pointer;
			border-radius: 0;
			&:hover{
				background: #d5e7fd;
			}
		}
	}
	&:nth-of-type(2n){
		margin:0 0 18/1200*100% 0;
	}
	&:last-of-type{
		margin-bottom: 0;
	}
	&:hover{
		box-shadow: $shadow;
	}
}

.dependent{
	// background: #ffffff;
	text-align: center;
	padding: 40px 0;
	margin-bottom: 20px;

	 > p {
	    margin-top: 21px;
	    color: #888;
	}
}



.pageing{
	padding: 40px 0 60px;
}

 .el-popover{
 	padding: 0;
 }

.prepare-op{
	text-align: center;
	font-size: 12px;
	color: #666666;
	line-height: 34px;
	a{
		color: #666666;
	}
	li{
		cursor: pointer;
		&:hover{
			background: #f8f8f8;
		}
	}
}

.removeing{
	border: 0;
	.el-message-box__header{
		background: $bg_1;
	}
	.el-message-box__title,
	.el-message-box__close{
		font-size: 14px;
		color: #FFFFFF;
	}
	.el-message-box__content{
		padding: 40px 10px;
		text-align: center;
	}

	.el-message-box__btns{
		text-align: center;
		padding-bottom: 20px;
		button{
			border: 0;
			outline: none;
			padding: 9px 25px;
			&:nth-of-type(1){
				background: #DEEFFF;
				color: #7C9BB8;
			}
		}
	}
}


.prepare-crumbs{
	padding: 0 0 20px;
	>span{
		font-size: 14px;
		color: #3A3A3A;
		cursor: pointer;
		
		&:first-of-type{
			color: #000000;
		}
		&:last-of-type{
			cursor: initial;
		}
	}
	i{
		font-family: "Simsun";
		padding: 0 10px;
	}
	>a{
		font-size: 14px;
	}
}

.prepare-add-cont{
	background: #fff;
	padding: 40px;
	min-height: 65vh;
}

.prepare-target{
	position: relative;
	.el-form-item__content{
		span{
			position: absolute;
			bottom: 5px;
			right: 15px;
			color: #999;
			font-size: 12px;
			line-height: initial;
			>i{
				color: #333;
			}
		}
	}
}

.prepare-add-select{
	>.el-form-item__content{

		.el-form-item{
			display: inline-block;
			vertical-align: top;
		}
	}
}


.uploader-add-album{
	display: inline-block;
	background: #E5F1FF;
	border-radius: 3px;
	padding: 0;
	text-align: center;
	line-height: 36px;
	height: 36px;
	width: 120px;
	border: 0;
	 // margin-left: 10px;
	 &:hover{
	 	background: #409EFF
	 }
}
.prepare-add-upBtn{
	button{
		background: #E5F1FF;
		border-radius: 3px;
		padding: 0;
		text-align: center;
		line-height: 36px;
		height: 36px;
		width: 120px;
		border: 0;
		margin: 0 15px 0 0 ;
		&:hover{
			background: none;
			color: #fff ;
		}
		&:focus{
			color: #fff ;
		}
	}
	.uploader-btn{
		border: 0;
		color: #409eff;
		padding: 0;
		width: 100%;
		height: 36px;
		&:hover{
			background: none;
			color: #fff;
		}
		&:focus{
			color: #fff ;
		}
	}

}

.prepare-relation{
	background: #EFEFEF;
	padding: 20px 30px 30px;
	margin-bottom: 20px;
	>h3{
		font-size: 12px;
		color: #333333;
		line-height: 16px;
		padding-bottom: 10px;
		border-bottom: $bd_3;
	}
	.prepare-relation-list{
		padding: 0 25px;
		border-bottom: $bd_3;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		>.el-icon-download {
			font-size: 14px;
			line-height: 40px;
			color: #999;
		}
		&:hover{
			background: #ecf5ff;
			.el-icon-close{
				opacity: 1;
				visibility: visible;
			}
		}
	}
	.el-icon-close{
		line-height: 40px;
		font-size: 16px;
		color: #999;
		cursor: pointer;
		opacity: 0;
		visibility: hidden;
		@extend .i_transition;
		&:hover{
			color: red;
		}
	}
}


.prepare-submit{
	text-align: center;
	padding-top: 60px;
}

.relation-dialog{
	.el-dialog__header{
		background: $bg_1;
		.el-dialog__title{
			color: #fff;
			font-size: 14px;
		}
		.el-dialog__headerbtn .el-dialog__close{
			color: #fff;
			font-size: 18px;
		}
	}
	.el-table__body-wrapper{
		height: 480px;
		overflow-y: auto;
	}
}

.relation-op{
	margin-bottom: 30px;
	>div{
		display: inline-block;
		vertical-align: top;
	}
	>.el-select{
		width: 160px;
		margin-right: 15px;
	}
	>.el-input{
		width: 320px;
		.el-input__suffix{
			background: $bg_1;
			right: 1px;
			width: 44px;
			text-align: center;
			 color: #fff;
			 border-radius: 0 4px 4px 0;
		}
	}
}

.relation-cont{
	.el-pagination{
		padding: 5px;
		border: 1px solid #ebeef5;
		border-top: none;
	}
}

.relation-btn{
	margin-top: 50px;
	text-align: center;
}

.prepare-date{
	.el-date-editor{
		width: 260px;
	}
	.el-input__inner{
		padding-left: 12px;
	}
	.el-input__prefix{
		left: initial;
		right: 1px;
		width: 44px;
		background: $bg_1;
		text-align: center;
		border-radius: 0 4px 4px 0;
		color: #fff;
		font-size: 16px;
	}
	.el-input__suffix{
		right: 50px;
	}
}

.prepare-invitation{
	.el-button{
		width: 80px;
		height: 36px;
		line-height: 36px;
		text-align: center;
		padding: 0;
	}
	.el-tag{
		border-radius: 0;
		border: none;
		background: #EFEFEF;
		color: #666;
		margin: 10px 10px 0 0;
	}
	.el-icon-close{
		color: #999;
	}
	.el-checkbox-group{
		display: none;
	}
}

// .conten-box{
// 	padding: 40px;
// 	background: #fff;
// 	.el-pagination{
// 		padding: 5px;
// 		border: 1px solid #ebeef5;
// 		border-top: none;
// 	}
// 	.el-table th{
// 		background: #ebeef5;
// 	}
// }

.labellass{
	button{
		background: none;
		border: none;
		padding: 0;
		margin-right: 15px;
	}
	.el-button--danger{
		color: #f56c6c;
		&:hover{
			background: none;
		}
	}
	>a{
		color: #409EFF;
		margin-right: 15px;
	}
}

.logo-path{
	>a{
		display: inline-block;
		vertical-align: top;
		background: #348EFC;
		border-radius: 3px;
		font-size: 16px;
		color: #FFFFFF;
		line-height: 21px;
		padding: 10px 18px;
	}
}

.addTask{
	display: inline-block;
		vertical-align: top;
		background: #348EFC;
		border-radius: 3px;
		font-size: 16px;
		color: #FFFFFF;
		line-height: 21px;
		padding: 10px 18px;
	position: absolute;
	top: 15px;
	right: 25px;
}

.prepare-index-link{
	.showActive{
		color: $sc_6;
	}
}

.task-add{
	.demo-ruleForm{
		padding: 40px;
		background: #fff;
	}

}

.relation-box{
	.el-form-item__content{
		>span{
			background-color: #f5f7fa;
			display: inline-block;
			vertical-align: top;
			margin-left: 15px;
			padding: 0 15px;
		}
		.el-button{
			padding:0;
			width: 80px;
			height: 36px;
			line-height: 36px;
			text-align: center;
		}
		>.el-input{
			display: none;
		}
	}
}

.task-times{
	.el-form-item__content{
		>span{
			color: #666;
			margin-left: 10px;
		}
	}
}


.el-tooltip__popper{
	max-width: 500px
}



.task-list-info-r{
	>span{
		margin-top: 25px;
		color: #999;
	}
	button,
	a{
		background: none;
		
		border: 0;
		outline: none;
		margin-right: 20px;
		cursor: pointer;
		display: inline-block;
		vertical-align: top;
	}
	.p-task{
		background-image: url(../../../../public/images/prepare.png);
		background-repeat: no-repeat;
		width: 40px;height: 40px;
	}
	.de {
		background-position: 0px -50px;
		&:hover{
			background-position: 0px 0px;
		}
		&:focus{
			background-position: -50px 0px;
		}
	}



	.del {
		background-position: -100px -50px;
		&:hover{
			background-position: -50px -50px;
		}
		&:focus{
			background-position: -100px 0px;
		}
	}


	.new {
		background-position: -100px -100px;
		&:hover{
			background-position: 0px -100px;
		}
		&:focus{
			background-position: -50px -100px;
		}
	}
}

.task-list{
	background: #fff;
	width: 510/1200*100%;
	box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
	border-radius: 3px;
	padding: 30/1200*100% 40/1200*100% 40/1200*100%;
	margin: 0 18/1200*100% 18/1200*100% 0;
	@extend .i_transition;
	&:nth-of-type(2n){
		margin: 0 0 18/1200*100% 0;
	}
	&:hover{
		box-shadow: $shadow;
		.el-icon-delete{
			opacity: 1;
		}
	}
}

.task-list-cc{
	overflow: hidden;
	.task-list-name{
		display: inline-block;
		vertical-align: top;
		font-size: 20px;
		color: #000000;
		letter-spacing: 0.16px;
		line-height: 26px;
		max-width: 80%;
		@extend .i_text;
		&:hover{
			color: $sc_6;
		}
	}
	>span{
		&:nth-of-type(2){
			float: right;
			font-size: 14px;
		}
	}
	.el-icon-delete{
		font-size: 18px;
		color: #666;
		cursor: pointer;
		opacity: 0;
		@extend .i_transition;
		&:hover{
			color: red;
		}
	}
}

.task-list-op{
	margin-top: 15px;
	span{
		display: inline-block;
		vertical-align: top;
		margin-right: 10px;
		font-size: 12px;
		    color: #5C6772;
		    padding: 6px 15px;
		    background: #E5F1FF;
		    margin-right: 20px;
		    cursor: pointer;

	}
}



.task-list-info{
	padding: 20px 0 0;
}

.task-list-info-l-img{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	>img{
		width: 100%;
		height: 100%;
	}
}

.task-list-info-l-txt{
	margin-left: 10px;
	>span{
		display: block;
		font-size: 14px;
		color: #666666;
		line-height: 19px;
		&:nth-of-type(2){
			font-size: 12px;
			line-height: 16px;
			margin-top: 5px;
		}
	}
}




.task-popover{
	min-width: 40px;
	text-align: center;
	line-height: 30px;
}

.statistics-title{
	text-align: center;
	    font-size: 20px;
	    margin: 0 0 20px 0 ;
	    line-height: initial;
}

.statistics-per{
	margin: 20px 0 ;
	>span{
		margin-right: 40px;
	}
}

.statistics-num{
	margin-bottom: 30px;
	>p{
		margin-bottom: 20px;
	}
	li{
		min-width: 80px;
		margin: 0 10px 10px 0;
	}
}

.el-dialog__header{
	background: $bg_1;
	.el-dialog__title{
		font-size: 14px;
		color: #fff;
	}
	.el-dialog__headerbtn .el-dialog__close{
		color: #fff;
		font-size: 18px;
	}
}

.demo-ruleForm{
	.el-input.is-disabled .el-input__inner,
	.el-textarea.is-disabled .el-textarea__inner{
		// border: none;
		background: none;
		color: #333;
	}
	.el-input__prefix, .el-input__suffix{
		display: none;
	}
}

.task-add{
	.demo-ruleForm .el-input__prefix, 
	.demo-ruleForm .el-input__suffix{
		display: block;
	}

	.el-input__prefix{
		left: initial;
		right: 1px;
		background: $bg_1;
		color: #fff;
		height: 94%;
		top: 1px;
		border-radius: 0 4px 4px 0;
		width: 44px;
	}
}

.alBox{
	.buttonCSS{
		text-align: center;
	}
}

.prepare-add-select{
	.el-input__prefix, 
	.el-input__suffix{
		display: block;
	}
}

.prepare-radio{
	.el-radio__label{
		display: none;
	}
}

.el-table .warning-row {
    background: #f0f9eb;
  }



@media screen and (max-width: 1380px){
	.i_maxW{
		max-width: 1000px;
	}

	// .prepare-add-select > .el-form-item__content .el-form-item{
	// 	width: 33.1%;
	// }

	.prepare-list .prepare-set > a{
		padding: 6px 10px;
	}
}